<template>
  <div class="shopInfo">
    <div id="box01">
      <span style="font-size: 17px;font-weight: 700;">配送信息</span>


      <div style="display: flex;margin-top: 10px;">
        <div id="box01_01"><span style="font-size: 12px;color:white;">校园专送</span></div>
        <div style="margin-left:10px ;"><span
            style="font-size: 13px;color: gray;letter-spacing: 1px;">由商家提供配送,约{{info.deliveryTime}}送达,距离{{info.distance}}</span>
        </div>
      </div>

      <van-row style="margin-top: 10px;">
        <van-col span="10" style="font-size: 13px;color: gray;">配送费用 ¥{{info.deliveryFee}}</van-col>
      </van-row>
    </div>

    <div id="box02">
      <span style="font-size: 16px;font-weight: 700;">活动与服务</span>
      <ul class="list">
        <li class="activity-item" v-for="(support, index) in info.supports" :key="index"
          :class="supportClasses[support.type]">
          <span class="content-tag">
            <span class="mini-tag">{{support.name}}</span>
          </span>
          <span class="activity-content">{{support.content}}</span>
        </li>
      </ul>
    </div>

    <div id="box03">
      <span style="font-size: 16px;font-weight: 700;">商家信息</span>
      <van-cell-group style="margin-top: 20px;">
        <van-cell title="品类" :value="info.shopCatalog" />
        <van-cell title="商家电话" value="18278866738" />
        <van-cell title="地址" :value="address" />
        <van-cell title="营业时间" :value="info.startTime +' 至 '+ info.endTime " />
        <van-cell title="营业执照" value="点击查看" @click="showShopLicens" />
      </van-cell-group>
    </div>

    <div style="height:60px;width:100%; background-color: rgba(200, 200, 200, 0.066);padding-top: 5px;">
      <van-divider :style="{ color: 'gray', borderColor: 'gray', padding: '0 16px' }">没有更多了</van-divider>
    </div>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import {
    ImagePreview
  } from 'vant';
  import {
    areaList
  } from '@vant/area-data';
  export default {
    computed: {
      ...mapState('shopInfo', ['info'])
    },
    data() {
      return {
        supportClasses: ['activity-green', 'activity-red', 'activity-orange'],
        address: ''
      }
    },
    methods: {
      showShopLicens() {
        ImagePreview([this.info.shopLicence])
      },
      convertCodeToString() {
        // if(!this.info.addressCodeArray){   
        //    return;
        // };
        //  var codeArr = this.info.addressCodeArray.split(',');
         
        // if (codeArr.length > 2) {
        //   var provice = areaList.province_list[codeArr[0]];
        //   var city = areaList.city_list[codeArr[1]];
        //   var county = areaList.county_list[codeArr[2]];
        //   this.address = provice + city + county + this.info.addressDetail;
        // }
       //   this.address = provice + city + county + this.info.addressDetail;

        var county = areaList.county_list[this.info.address];
        this.address = county + this.info.addressDetail;
      }
    },
    mounted() {
      
      setTimeout(() => {
        this.convertCodeToString();
      }, 1000);
    },
  }
</script>

<style scoped>
  .shopInfo {
    padding-top: 5px;
    background-color: rgba(200, 200, 200, 0.066);
    width: 378px;
    height: 400px;
    box-sizing: border-box;
  }

  #box01 {
    width: 100%;
    height: 100px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;

  }

  #box01_01 {
    width: 55px;
    height: 20px;
    background-color: gold;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 4px;
  }

  #box02 {
    margin-top: 10px;
    width: 100%;
    height: 180px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
  }

  #box03 {
    margin-top: 10px;
    width: 100%;
    height: 320px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
  }

  .list {
    margin-top: 10px;
    font-size: 16px;
    height: 160px;
    overflow: scroll;
  }

  .activity-item {
    margin-bottom: 12px;
    display: flex;
    font-size: 13px;
    align-items: center;
  }

  .activity-green .content-tag {
    background-color: rgb(112, 188, 70)
  }

  .activity-red .content-tag {
    background-color: rgb(240, 115, 115)
  }

  .activity-orange .content-tag {
    background-color: rgb(241, 136, 79)
  }

  .content-tag {
    display: inline-block;
    border-radius: 2px;
    width: 36px;
    height: 18px;
    margin-right: 10px;
    color: #fff;
    font-style: normal;
    position: relative;
  }

  .mini-tag {

    position: absolute;
    left: 0;
    top: 0;
    right: -100%;
    bottom: -100%;
    font-size: 24px;
    transform: scale(.5);
    transform-origin: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>